<template>
    <div class="ys-float-btn" :style="{'width':itemWidth+'px','height':itemHeight+'px','left':left+'px','top':top+'px'}" @click="goextdet">
      <img src="./../../../assets/img/float_icon.png" alt="">
      <p>赚{{profit}}元</p>
    </div>
</template>

<script>
export default {
  name: 'Float',
  props: {
    profit: {
      type: Number
    },
    vid:{
      type:Number | String ,
      default:0
    },
    text: {
      type: String,
      default: '默认文字'
    },
    itemWidth: {
      type: Number,
      default: 100
    },
    itemHeight: {
      type: Number,
      default: 35
    },
    gapWidth: {
      type: Number,
      default: 0
    },
    coefficientHeight: {
      type: Number,
      default: 0.1
    }
  },
  created () {
    this.clientWidth = document.documentElement.clientWidth
    this.clientHeight = document.documentElement.clientHeight
    this.left = this.clientWidth - this.itemWidth - this.gapWidth
    this.top = this.clientHeight * this.coefficientHeight
  },
  mounted () {
    window.addEventListener('scroll', this.handleScrollStart)
  },
  beforeDestroy () {
    window.removeEventListener('scroll', this.handleScrollStart)
  },
  methods: {
    handleScrollStart () {
      this.timer && clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        this.handleScrollEnd()
      }, 300)
      this.currentTop = document.documentElement.scrollTop || document.body.scrollTop
      if (this.left > this.clientWidth / 2) {
        this.left = this.clientWidth - this.itemWidth / 3
      } else {
        this.left = -this.itemWidth / 3
      }
    },
    handleScrollEnd () {
      let scrollTop = document.documentElement.scrollTop || document.body.scrollTop
      if (scrollTop === this.currentTop) {
        if (this.left > this.clientWidth / 2) {
          this.left = this.clientWidth - this.itemWidth - this.gapWidth
        } else {
          this.left = this.gapWidth
        }
        clearTimeout(this.timer)
      }
    },
    goextdet () {
      this.$router.push({ name: 'detailofextension' ,query:{vid:this.vid}})
    }
  },
  data () {
    return {
      timer: null,
      currentTop: 0,
      clientWidth: 0,
      clientHeight: 0,
      left: 0,
      top: 0
    }
  }
}
</script>

<style lang="less" scoped>
  .ys-float-btn{
    z-index: 99;
    background:rgb(255,255,255);
    box-shadow:0 2px 10px 0 rgba(0,0,0,0.1);
    color: #666666;
    transition: all 0.3s;
    position: fixed;
    display: flex;
    flex-direction: row;
    align-items: center;
    border-bottom-left-radius: 16px;
    border-top-left-radius: 16px;

    img{
      width: 17px;
      height: 17px;
      margin-left: 8px;
      margin-right: 2px;
      border-radius: 50%;
    }
    p{
      font-size:13px;
    }
  }
</style>
